<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>写书</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/beiyong.css"/>
		<style type="text/css">
			.ic{
				height: 100%;
				display: flex;
				align-items: center;
				font-family: Muiicons;
			    font-size: 18px;
			    line-height: 1;
			    z-index: 20;
			    padding-top: 10px;
			    padding-bottom: 10px;
			    color: white;
			}
			.main{
				width: 100%;
				height: auto;
				min-height: 400px;
				/*background-color:;*/
				padding: 10px;
				margin: auto;
				margin-top: 10px;
			}
				*{
			margin: 0;
			padding: 0;
		}
		body {
		    -webkit-touch-callout: none;
		    background-color: #fff;
		    line-height: inherit;
		    padding-top: 30px;
		}
		#contentEditor{
			width: 100%;
			min-height: 300px;
			box-sizing: border-box;
			padding: 10px;
    		color: #444;
		}
		#contentEditor p{
		    letter-spacing: 0.25px;
		    font: 16px/25px Tahoma, Verdana, 宋体;
		    margin: 20px 0px;
		}
		#contentEditor h4 {
		    font-weight: bold;
		    line-height: 1.333em;
		    margin: 10px 0 20px;
		    padding: 25px 0 0;
		}
		#contentEditor img{
			width: 100%;
			height: auto;
			box-sizing: border-box;
		}
		.dempTip{
		    border-left: 2px solid #00BCD4;
		    padding-left: 5px;
		    margin: 10px;
		    font-size: 16px;
		}
		code{
			white-space: pre-wrap;
		    background: #2D2D2D;
		    display: block;
		    margin: 10px;
		    border-radius: 5px;
		    color: #fff;
		}
		.viewTit{
		    color: #FF5722;
		    position: fixed;
		    top: 0;
		    left: 0;
		    height: 30px;
		    line-height: 30px;
		    font-size: 14px;
		    text-align: center;
		    display: block;
		    width: 100%;
		    background: #FFEB3B;
		    box-shadow: 0 0 5px;
		}
		button{
			width: 100%;
			height: 2.5em;	
		}
		.main{
			overflow: scroll;
		}
		*{
			word-break: break-word;
		}
		.bt{
			width: 100%;
			
		}
		.bt>input{
			width: 100%;
			padding: 12px;
			border: 0;
			background-color: #E7EFFE;
			padding-left: 20px;
		}
		img{
			max-width: 100%;
		}
		</style>
	</head>

	<body>
	
		<header class="mui-bar mui-bar-nav hbg">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">写书</h1>
		    <div class=" ic  mui-pull-right" onclick="subcontent()">保存</div>
		</header>
		
		<div class="mui-content">
			<div class="bt">
				<input id="title" maxlength="12" type="" name="" id="" value="" placeholder="标题"/>
			</div>
			
			<div class="main" id="main">
				
				
				
			</div>
			<!--
            	作者：592176224@qq.com
            	时间：2018-12-12
            	描述：
			<div class="">
				<br />
				<button type="button" class="mui-btn mui-btn-blue" id="getcontent">获取内容</button>
			</div>
            -->
			
			
		</div>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/Eleditor.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/webuploader.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/req.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var id=0,bid = 0,cid=0;
			window.onload = function(){
				var ua = navigator.userAgent.toLowerCase();	
				if( ua.indexOf('android') >= 0 || ua.indexOf('iphone') >= 0 || ua.indexOf('ipad') >= 0 || $(window).width() <= 500 ){
					$('.viewTit').hide();
					$('body').css('padding-top', 0);
				}
				/*let w1 = document.body.clientWidth - 20;
				let main = document.getElementById("main");
				main.style.width = w1 + "px";
				main.style.height = (w1*z) + "px";*/
				bid = getrequest().bid;
				cid = getrequest().cid;
				mui.plusReady(function(){
					let view = plus.webview.currentWebview();
					bid = view.bid || 0;
					cid = view.cid || 0;
				})
				console.log(bid);
				console.log(cid);
				getbookdetas();
				
			}
			function getbookdetas(){
				if(bid>0&&cid>0){
					let data = {
						url:"/api/Book/book_article_info",
						data:{
							access_token:acctoken(),
							bid:bid,
							id:cid,
						}
					}
					ajax(data,function(res){
						console.log(res);
						console.log(res.data[0].content.length);
						console.log(res.data[0].content);
						g("title").value = res.data[0].title;
						g("main").innerHTML = res.data[0].content;
						id = res.data[0].id;
						bid = res.data[0].bid;
					})
				}
			}
				var contentEditor = new Eleditor({
						el: '#main',
						uploader:function(){
							 /*必须返回一个Promise对象，成功返回url，失败返回错误信息*/
				        return new Promise(function(_resolve, _reject){
				        	
				           plus.gallery.pick(function(a) {
            				plus.io.resolveLocalFileSystemURL(a, function(entry) {
            					plus.io.resolveLocalFileSystemURL("_doc/", function(root) {
            						root.getFile("head.png", {}, function(file) {
            					//文件已存在
            							file.remove(function() {
	            						entry.copyTo(root, "head.png", function(e) {
	            							var e = e.fullPath + "?version=" + new Date().getTime();
											getBase64Image(e,function(res){
												console.log(res);	
												let data = {
													url:"/api/Image/uploadBase64",
													data:{
														access_token:acctoken()||"",
														base64:res.dataURL
													}
												}
												ajaxbase64(data,function(res){
													//console.log(JSON.stringify(res));
													if(res.code == 1){
														mui.toast("图片上传成功！")
														 _resolve(res.data[0].path)
													}
													if(res.code == -1){
														mui.toast("图片上传失败！")
													}
												})
											});
	            						}, function(e) {
	            							console.log("copy img file:" + e.message);
	            						});
		            					}, function() {
		            						console.log("删除" + e.message)
		            					});
            				}, function() {
            					//文件不存在
            					entry.copyTo(root, "head.png", function(e) {
            						var path = e.fullPath + "?version=" + new Date().getTime();
            						console.log("path",path);
            						mui.toast("文件找不到");
            					}, function(e) {
            						console.log("copy img file:" + e.message);
            					});
            				});
            			}, function(e) {
            				console.log("get _www folder fail");
            			})
            		}, function(e) {
            			console.log("读取拍照文件错误" + e.message);
            		})
            	}, function(a) {}, {
            		filter: "image"
            	})
				          
						})
				        },
						
						/*初始化完成钩子*/
						mounted: function(){
							/*以下是扩展插入视频的演示*/
	 						var _videoUploader = WebUploader.create({
													auto: true, 
													server: '服务器地址',
													/*按钮类就是[Eleditor-你的自定义按钮id]*/
												    pick: $('.Eleditor-insertVideo'),
												    duplicate: true, 
												    resize: false,
												    accept: {
									    				title: 'Images', 
									    				extensions: 'mp4',
														mimeTypes: 'video/mp4'
													},
												    fileVal: 'video',
												});
							_videoUploader.on( 'uploadSuccess', function( _file, _call ) {

								if( _call.status == 0 ){
									return window.alert(_call.msg);
								}

								/*保存状态，以便撤销*/
								contentEditor.saveState();
								contentEditor.getEditNode().after(`
									<div class='Eleditor-video-area'>
										<video src="${_call.url}" controls="controls"></video>
									</div>
								`);
								contentEditor.hideEditorControllerLayer();
							});
							
							var _audioloader = WebUploader.create({
													auto: true, 
													server: '服务器地址',
													/*按钮类就是[Eleditor-你的自定义按钮id]*/
												    pick: $('.Eleditor-insertAudio'),
												    duplicate: true, 
												    resize: false,
												    accept: {
									    				title: 'Images', 
									    				extensions: 'mp4',
														mimeTypes: 'video/mp4'
													},
												    fileVal: 'audio',
												});
							_audioloader.on( 'uploadSuccess', function( _file, _call ) {
								console.log(_file);
								console.log(_call);
								if( _call.status == 0 ){
									return window.alert(_call.msg);
								}

								/*保存状态，以便撤销*/
								contentEditor.saveState();
								contentEditor.getEditNode().after(`
									<div class='Eleditor-video-area'>
										<video src="${_call.url}" controls="controls"></video>
									</div>
								`);
								contentEditor.hideEditorControllerLayer();
							});
							
						},
						changer: function(){
							console.log('文档修改');
						},
						/*自定义按钮的例子*/
						toolbars: [
							'insertText',
							'editText',
							'insertImage',
							'insertLink',
							'insertHr',
							'delete',
			              	'undo',
			              	/*
			              	'video',*/
			              	//自定义一个视频按钮
							{
								id: 'insertVideo',
								// tag: 'p,img', //指定P标签操作，可不填
								name: '插入视频',
								handle: function(select, controll){//回调返回选择的dom对象和控制按钮对象
									console.log("视频")
									
									return false;
								}
							},
							{
								id: 'insertAudio',
								// tag: 'p,img', //指定P标签操作，可不填
								name: '插入音频',
								handle: function(select, controll){//回调返回选择的dom对象和控制按钮对象

									console.log("音频")
									return false;
								}
							},
			              	'cancel'
						]
						//placeHolder: 'placeHolder设置占位符'
					});
			function subcontent(){
					let title = document.getElementById("title").value||""; 
					var _content = contentEditor.getContent();
//					console.log(JSON.stringify(_content));
					let str = _content.trim();
					let str2 = str.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi,function (match, capture) {   
						
						let cap = capture.replace("http://ws.rovine.cn/uploads","");
						return "<img src=\""+cap+"\">";
					});
					
					if(str!= ""){
					let data = {
						url:"/api/Book/add_book_article",
						data:{
							access_token:acctoken()||"",
							title: title||"",
							content:_content,
							bid:bid||0,
							id:id||"",
						}
					}
					console.log("data",data);
					ajax(data,function(res){
							console.log(res);
							if(res.code == -1){
								mui.toast(res.message);
							}
							if(res.code == 1){
								mui.toast("编辑成功");
							}
						});
					
				}else{
					mui.toast("文章不能为空！")
				}
			}
</script>

	</body>

</html>